<template>
  <div class="chat-dialog-container" :class="{ 'collapsed': isCollapsed, 'floating': floating }">
    <div class="chat-header" @click="toggleCollapse">
      <h3>AI助手</h3>
      <!-- <button class="collapse-btn">{{ isCollapsed ? '展开' : '收起' }}</button> -->
    </div>
    <div v-show="!isCollapsed" class="chat-body">
      <div class="messages-container" ref="messagesContainer">
        <div v-for="message in messages" :key="message.id" class="message" :class="`message-${message.author}`">
          <div class="message-content">
            <!--  || message.author === 'thought' -->
            <TypewriterText 
              v-if="message.author === 'agent'"
              :text="message.text"
              :speed="30"
              :delay="message.author === 'thought' ? 500 : 0"
            />
            <template v-else>{{ message.text }}</template>
          </div>
          <div class="message-timestamp">{{ formatTime(message.timestamp) }}</div>
        </div>
      </div>
      <div class="chat-input-container">
        <textarea
          v-model="newMessage"
          @keyup.enter.prevent="sendMessage"
          placeholder="请输入您的需求..."
          class="chat-input"
          :disabled="isLoading"
          rows="3"
        ></textarea>
        <button @click="sendMessage" class="send-btn" :disabled="isLoading">
          {{ isLoading ? '思考中...' : '发送' }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, nextTick } from 'vue';
import { formatTime } from '@/utils/helpers.js';
import TypewriterText from './TypewriterText.vue';

const props = defineProps({
  initialMessages: {
    type: Array,
    default: () => [],
  },
  isLoading: {
    type: Boolean,
    default: false,
  },
  floating: {
    type: Boolean,
    default: false,
  }
});

const emit = defineEmits(['message-sent']);

const messages = ref(props.initialMessages);
const newMessage = ref('');
const isCollapsed = ref(false);
const messagesContainer = ref(null);

const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value;
};

const sendMessage = () => {
  if (newMessage.value.trim() !== '' && !props.isLoading) {
    emit('message-sent', newMessage.value);
    newMessage.value = '';
  }
};

const scrollToBottom = () => {
  nextTick(() => {
    if (messagesContainer.value) {
      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
    }
  });
};

// 暴露方法供父组件添加新消息
const addMessage = (message) => {
  messages.value.push(message);
  scrollToBottom();
};

defineExpose({
  addMessage
});

</script>

<style scoped>
.chat-dialog-container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease-in-out;
  z-index: 1000;
  overflow: hidden;
  backdrop-filter: none;
  animation: none;
}

.chat-dialog-container.floating {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 400px;
  max-width: 90vw;
  height: calc(100vh - 120px); /* 考虑头部高度60px + 间距 */
  max-height: 600px;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(4px);
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.chat-dialog-container.collapsed {
  /* width: 200px; */
  height: 50px;
  cursor: pointer;
}

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
  /* color: white; */
  cursor: pointer;
  width: 100%;
  border-bottom: 1px solid #e5e7eb;
}

.chat-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.collapse-btn {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 6px;
  transition: background-color 0.2s;
}

.collapse-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.chat-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0; /* 防止flex子元素溢出 */
}

.messages-container {
  flex-grow: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background-color: #f9fafb;
  min-height: 0; /* 防止flex子元素溢出 */
}

.message {
  padding: 12px 16px;
  border-radius: 16px;
  max-width: 80%;
  word-wrap: break-word;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s, box-shadow 0.2s;
}

.message:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.message-user {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

.message-agent, .message-thought {
  background-color: #ffffff;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  border: 1px solid #e5e7eb;
}

.message-thought {
  background: linear-gradient(135deg, #e8eaf6 0%, #f3e5f5 100%);
  font-style: italic;
  color: #5c6bc0;
  border-left: 3px solid #667eea;
}

.message-content {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 4px;
}

.message-timestamp {
  font-size: 11px;
  opacity: 0.7;
  margin-top: 4px;
  text-align: right;
}

.message-user .message-timestamp {
  color: rgba(255, 255, 255, 0.8);
}

.chat-input-container {
  display: flex;
  padding: 20px;
  border-top: 1px solid #e5e7eb;
  background-color: #ffffff;
  gap: 12px;
  flex-shrink: 0; /* 防止压缩 */
}

.chat-input {
  flex-grow: 1;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
  resize: none;
  min-height: 60px;
  max-height: 120px;
  line-height: 1.5;
  background-color: white;
  transition: border-color 0.3s, box-shadow 0.3s;
  font-family: inherit;
}

.chat-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.chat-input::placeholder {
  color: #9ca3af;
}

.send-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 12px;
  width: 70px;
  height: 60px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
  flex-shrink: 0; /* 防止压缩 */
}

.send-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.send-btn:disabled {
  background: #d1d5db;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 自定义滚动条 */
.messages-container::-webkit-scrollbar {
  width: 6px;
}

.messages-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.messages-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.messages-container::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style> 